<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <div id="app">
      <div>
            <ul>
              <li v-myfor="list"></li>
            </ul>
            <ul>
              <li v-myfor="province"></li>
            </ul>
      </div>
    </div>
      <script src="./vue.js"></script>
      <script>
        Vue.directive('myfor',{
             bind(){},
             inserted(el,binding){
              // binding.value
               let str=``
               binding.value.forEach(item=>{
                   str+=`<li>${item}</li>`
               })
               el.parentNode.innerHTML=str;//添加到父元素
             },
             update(){},
             componentUpdated(){},
             unbind(){
               
             }
        }) 
        // 
        new Vue({
            el:"#app",
            data(){
              return {
                list:["北京","上海","广州","深圳"],
                province:["河北","山东","江苏","浙江"]
              }
            }
        })
      </script>
</body>
</html>